<template>
  <NuxtLayout>
    <el-breadcrumb class="my-crumb">
      <el-breadcrumb-item v-for="(item, index) in crumbData" :key="index">
        <a :href="item.href">{{ item.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <NewsMenuTable
      :typeData="typeData"
      :typeSelectId="listForm.categoryId"
      :tableData="tableData"
    />
    <div class="pagin" v-show="tableData.length > 0">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        :page-size="listForm.pageSize"
        v-model:current-page="listForm.pageNum"
        @change="pageChangeFn"
      />
    </div>
  </NuxtLayout>
</template>

<script setup>
import { categoryPageList, informationPageList } from "~/server/api";
import { useCountStore } from "~/store/counter.js";
useCountStore().$patch({
  indexActive: 2,
});
const crumbData = ref([
  { title: '首页', href: '/' },
  { title: '新闻资讯', href: 'javascript:;' },
])
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_新闻资讯",
  keywords: "技考邦,新闻资讯",
  description: "技考邦，新闻资讯。",
  ogTitle: "技考邦_新闻资讯",
  ogDescription: "技考邦，新闻资讯。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
// 新闻列表
const all = useRoute().params.all;
const typeData = ref([]);
const total = ref(0);
// 获取类型
let { data: typeRes } = await useAsyncData("categoryPageList", () =>
  useServerRequest(categoryPageList, {
    method: "post",
    body: JSON.stringify({
      pageNum: 1,
      pageSize: 10,
      parentId: 0,
    }),
  })
);
if (typeRes.value && typeRes.value.errno === 0) {
  typeRes.value.result.list.forEach((item) => {
    if (item.id == all[0]) {
      // 修改TDK
      useSeoMeta({
        title: `技考邦_${item.name}`,
        keywords: "技考邦,新闻资讯",
        description: `技考邦,${item.name}`,
        ogTitle: `技考邦_${item.name}`,
        ogDescription: `技考邦，${item.name}`,
        ogType: "article",
        ogUrl: `${prevHost}://${host}${fullPath}`,
      });
    }
  });
  typeData.value = typeRes.value.result.list;
}
// 列表
const listForm = ref({
  pageNum: parseInt(useRoute().query.p) || 1,
  pageSize: 20,
  categoryId: all ? all[0] : "",
});
const tableData = ref([]);
let getList = async () => {
  let { data: listRes } = await useAsyncData("informationPageList", () =>
    useServerRequest(informationPageList, {
      method: "post",
      body: JSON.stringify(listForm.value),
    })
  );
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
    return false;
  }
};
getList();
// 分页
const pageChangeFn = (val) => {
  let href = "/news";
  if (all) {
    if (all[0]) {
      href += `/${all[0]}?p=${val}`;
    }
  }
  location.href = href;
};
</script>

<style lang="less" scoped>
.pagin {
  width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
}
</style>
